<!-- src/components/ToolCard.vue -->
<template>
  <el-card @click="navigateToTool">
    <h3>{{ tool.name }}</h3>
    <p>{{ tool.description }}</p>
  </el-card>
</template>

<script>
export default {
  props: {
    tool: Object,
  },
  methods: {
    navigateToTool() {
      this.$router.push(`/tools/${this.tool.name}`);
    },
  },
};
</script>

<style scoped>
.el-card {
  cursor: pointer;
  transition: transform 0.3s;
}

.el-card:hover {
  transform: scale(1.05);
}
</style>
